<template>
    <div ref="chartContainer3"
        style="width: 100%;height:13.5625rem;"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import { RequestStatisticGetPriceOfSettle } from "@/api/path/index.js";
export default defineComponent({
    setup() {
        const chartContainer3 = ref<HTMLElement | null>(null);
        let chartInstance: echarts.ECharts | null = null;
        const initChart = () => {
            RequestStatisticGetPriceOfSettle().then((res: any) => {
                if (chartContainer3.value) {
                    chartInstance = echarts.init(chartContainer3.value);
                    // 设置ECharts选项
                    chartInstance.setOption({
                        tooltip: {
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#000'
                                }
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '6%',
                            top: '20%',
                            containLabel: true,
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: res.resultObj.date
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'Line 1',
                                type: 'line',
                                // stack: 'Total',      
                                smooth: true,
                                lineStyle: {
                                    width: 2
                                },
                                showSymbol: false,
                                areaStyle: {
                                    opacity: 0.8,
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: 'rgba(22,93,255,0.2)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(22, 93, 165,.1)'
                                        }
                                    ])
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                data: res.resultObj.price
                            }
                        ]
                    });
                }
            })
        };

        const resizeChart = () => {
            if (chartInstance) {
                chartInstance.resize();
            }
        };

        onMounted(() => {
            initChart();
            window.addEventListener('resize', resizeChart);
        });

        watch(chartContainer3, () => {
            if (chartInstance) {
                chartInstance.dispose(); // 销毁旧的实例
            }
            initChart();
        });

        return {
            chartContainer3,
        };
    },
});
</script>